﻿$(document).ready(function () {

    //local datasource
    var furnitures = [
        { "Name": "Sofa", "type": "Chair", "url": "" },
        { "Name": "Classic", "type": "Chair", "url": "" },
        { "Name": "Relxer", "type": "Chair", "url": "" },
        { "Name": "Demouls", "type": "Chair", "url": "" },
        { "Name": "Vestas", "type": "Chair", "url": "" },
        { "Name": "Kostar", "type": "Chair", "url": "" },
        { "Name": "Demostae", "type": "Chair", "url": "" }
    ];

    //initialize datasoruce
    var dataSource = new kendo.data.DataSource({
        data: furnitures,
        pageSize: 4
    });

    //pager to the gallery
    $("#pager").kendoPager({
        dataSource: dataSource
    });

    //list view for gallery
    $("#listView").kendoListView({
        dataSource: dataSource,
        selectable: "multiple",
        change: onChange,
        template: kendo.template($("#template").html())
    });

    //even on change
    function onChange() {
        var data = dataSource.view(),
            selected = $.map(this.select(), function (item) {
                alert(data[$(item).index()].Name);
            });

    }

    //slider for rotation.
    var slider = $("#rotationChange").kendoSlider({
        slide: rotationOnChange,
        increaseButtonTitle: "Right",
        decreaseButtonTitle: "Left",
        min: 0,
        max: 360,
        smallStep: 2,
        largeStep: 1,
        change: rotationOnChange
    }).data("kendoSlider");

    //slider for scale
    var slider = $("#scaleChange").kendoSlider({
        slide: scaleOnChange,
        increaseButtonTitle: "Right",
        decreaseButtonTitle: "Left",
        min: 0,
        max: 100,
        smallStep: 2,
        largeStep: 1,
        value: getScale(),//(0>1) ? 5 : 20, 
        change: scaleOnChange
    }).data("kendoSlider");

    //color pallette
    $("#palette").kendoColorPalette({
        columns: 4,
        tileSize: {
            width: 34,
            height: 19
        },
        palette: [
            "#f0d0c9", "#e2a293", "#d4735e", "#65281a",
            "#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
            "#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
            "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
            "#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
        ],
        change: preview
    });

    //on color pallette click
    function preview(e) {
        alert(e.value);
    }

    //on rotation change
    function rotationOnChange(e) {
        //console.log(e.value);
        window.augmentedReality.core.rotation.z += 0.0174532925;
        //window.augmentedReality.core.scale.y = e.value / 10;
        //window.augmentedReality.core.scale.z = e.value / 10;
    }

    //on scale change
    function scaleOnChange(e) {
       // debugger;
        //alert(e.value);
        //console.log(e.value);
        window.augmentedReality.core.scale.x = e.value / 10;
        window.augmentedReality.core.scale.y = e.value / 10;
        window.augmentedReality.core.scale.z = e.value / 10;
    }

    function getScale() {
        if (window.augmentedReality.core !== undefined && window.augmentedReality.core !== null) {
            return window.augmentedReality.core.scale.x;
        }
        else {
            return 0;
        }
    }

   
});